<!--
 * @Date: 2023-04-17 11:24:57
 * @LastEditTime: 2023-04-17 14:11:09
-->
<template>
  <a-modal
    v-model="visible"
    title="修改密码"
    width="480px"
    :footer="null"
    @ok="submit"
    centered>
    <a-input-password class="m_input" v-model="form.old_password" placeholder="请输入旧密码">
      <template #prefix>
        <img src="@/assets/login/login_lock.png" alt class="img" />
      </template>
    </a-input-password>

    <a-input-password class="m_input" v-model="form.account_password" placeholder="请输入新密码">
      <template #prefix>
        <img src="@/assets/login/login_lock.png" alt class="img" />
      </template>
    </a-input-password>

    <a-input-password class="m_input" v-model="form.confirm_password" placeholder="请输入确认密码">
      <template #prefix>
        <img src="@/assets/login/login_lock.png" alt class="img" />
      </template>
    </a-input-password>

    <a-row :gutter="16">
      <a-col span="12">
        <a-button type="primary" @click="submit" style="width: 100%; height: 40px">保存修改</a-button>
      </a-col>
      <a-col span="12">
        <a-button @click="visible = false" style="width: 100%; height: 40px">暂不修改</a-button>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
import { updatePassword } from '@/api/account'

export default {
  data () {
    return {
      visible: false,
      loading: false,
      form: { old_password: '', account_password: '', confirm_password: '' }
    }
  },
  created () {},
  methods: {
    open () {
      this.visible = true
    },

    submit () {
      this.loading = true
      updatePassword(this.form)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.visible = false
          } else this.$message.error(res.msg)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.m_input {
  height: 48px;
  margin-bottom: 16px;
  background: #ffffff;

  :deep(.ant-input) {
    height: 100%;
    padding-left: 48px !important;
  }

  .img {
    width: 28px;
    height: 28px;
  }
}
</style>
